// 近5日用户人数新增和流失趋势
var lossGrowth = echarts.init(document.getElementById('lossGrowth'));
$.get("data/近5日新增和流失用户数据.json").done(function (data) {
    // data = JSON.parse(data);
    data = {
        "类型": ["新增人数", "流失人数"],
        "日期": ["9月1日", "9月2日", "9月3日", "9月4日", "9月5日"],
        "新增人数": [5, 25, 20, 22, 12],
        "流失人数": [3, 11, 13, 4, 8]
    }
    lossGrowth.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            type: 'scroll'
        },
        grid: {
            left: '10',
            right: '30',
            bottom: '10',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.日期
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新增人数',
                type: 'line',
                data: data.新增人数,
                symbol: 'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(194, 53, 49,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            },
            {
                name: '流失人数',
                type: 'line',
                symbol: 'circle',
                data: data.流失人数,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(47, 69, 84,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            }
        ]
    });
});

//用户类型人数
var cSorNum = echarts.init(document.getElementById('cSorNum'));
$.get("data/不同类型用户的人数.json").done(function (data) {
    // data = JSON.parse(data);
    data = {
        "data": [
            { "value": 760, "name": "流失用户" },
            { "value": 234, "name": "忠诚用户" },
            { "value": 800, "name": "潜力用户" },
            { "value": 800, "name": "一般用户" }
        ]
    }
        ;
    cSorNum.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            show: false
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        series: [
            {
                name: '用户类型人数',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '50%'],
                label: {
                    formatter: "{b}\n{a|{d}%}",
                    rich: {
                        a: {
                            padding: 6,
                            align: 'left',
                            color: '#fff'
                        }
                    }
                },
                data: data.data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
});



// 用户分群
var userGroup = echarts.init(document.getElementById('userGroup'));
$.get("data/用户分群数据.json").done(function (data) {
    // data = JSON.parse(data);
    data = {
        "data": [
            { "value": [40, 30, 20, 40, 40], "name": "忠诚用户" },
            { "value": [58, 20, 44, 70, 60], "name": "潜力用户" },
            { "value": [70, 40, 40, 60, 50], "name": "一般用户" },
            { "value": [8, 9, 10, 7, 8], "name": "流失用户" }
        ]
    }
        ;
    userGroup.setOption({
        tooltip: {},
        legend: {
        },
        radar: {
            name: {
                textStyle: {
                    color: '#fff',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            center: ['50%', '58%'],
            splitArea: {
                areaStyle: {
                    color: 'transparent'
                }
            },
            axisLine: { lineStyle: { color: '#061e42' } },
            splitLine: { lineStyle: { color: '#061e42' } },
            indicator: [
                { name: '消费金额', max: 80, color: 'black' },
                { name: '购买数量', max: 80, color: 'black' },
                { name: '购买频率', max: 80, color: 'black' },
                { name: '交易次数', max: 80, color: 'black' },
                { name: '客单价', max: 80, color: 'black' }
            ]
        },
        series: [{
            name: '用户分群',
            type: 'radar',

            areaStyle: {
                show: true,
                opacity: 0.3
            },
            data: data.data
        }]
    })
});



// 用户消费时段
var expTime = echarts.init(document.getElementById('expTime'));
$.get("data/用户消费时段数据.json").done(function (data) {
    // data = JSON.parse(data);
    data = {
        "消费时段": ["早上", "上午", "中午", "下午", "晚上"],
        "用户人数": [3, 22, 24, 28, 11]
    };
    expTime.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10',
            top: '30',
            right: '10',
            bottom: '10',
            containLabel: true
        },
        barCategoryGap: '50%',
        xAxis: {
            type: 'value',
            min: 0,
            boundaryGap: [0, 0.01],
            axisLine: { lineStyle: { width: 0 } }
        },
        yAxis: {
            type: 'category',
            splitLine: { lineStyle: { width: 0 } },
            data: data.消费时段
        },
        series: [
            {
                name: '售出总数量',
                type: 'bar',
                label: {
                    position: 'right',
                    verticalAlign: 'middle'
                },
                data: data.用户人数
            }
        ]
    })
});



// 用户消费地点
var expLoc = echarts.init(document.getElementById('expLoc'));
$.get("data/用户消费地点数据.json").done(function (data) {
    // data = JSON.parse(data),
    data = {
        "消费地点": ["广州", "深圳", "东莞", "佛山", "珠海"],
        "用户人数": [35, 25, 9, 21, 18]
    }
        ,
        expLoc.setOption({
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: '10',
                right: '10',
                bottom: '0',
                top: '30',
                containLabel: true
            },
            barCategoryGap: '60%',
            xAxis: [
                {
                    type: 'category',
                    data: data.消费地点,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: { lineStyle: { width: 0 } }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: data.用户人数,
                }
            ]
        })
});



// 商品价格区间
var pInterval = echarts.init(document.getElementById('pInterval'));
pInterval.setOption({
    grid: {
        left: '3%',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    tooltip: {
        showDelay: 0,
        formatter: function (params) {
            return params.seriesName + '<br/>' + '单价：' + params.value[0] + '<br/>' + '销量：' + params.value[1];
        },
        axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
                type: 'dashed',
                width: 1
            }
        }
    },

    legend: {
        type: 'scroll',
    },
    xAxis: { scale: true },
    yAxis: { scale: true },
});

$.get("data/商品销量数量和价格数据.json").done(function (data) {
    // data = JSON.parse(data);
    data = [
        {"value":[6.5,8],"name":"双喜"},
        {"value":[1.8,13],"name":"五叶神"},
        {"value":[3.5,13.5],"name":"椰树"},
        {"value":[2.6,9],"name":"羊城"},
        {"value":[3.8,14],"name":"红玫"},
        {"value":[1.5,22],"name":"好日子"},
        {"value":[4.5,10.5],"name":"阿里山"},
        {"value":[5.5,18],"name":"特美思"},
        {"value":[4.8,16],"name":"玉溪"},
        {"value":[4.8,16],"name":"芙蓉王"}
    ];
    var series = [];
    for (var i = 0; i < data.length; i++) {
        series.push({
            name: data[i].name,
            type: 'scatter',
            data: [data[i].value],
            symbolSize: data[i].value[1] * 2
        });
    }
    pInterval.setOption({
        series: series
    });
});



// 用户画像
var chart = echarts.init(document.getElementById('userHot'));
$.get("data/用户购买的商品名称和商品数量数据.json").done(function (data) {
    // data = JSON.parse(data);
    data = {
        "data": [
            {"value":22199,"name":"双喜"},
            {"value":10288,"name":"五叶神"},
            {"value":274470,"name":"椰树"},
            {"value":12311,"name":"羊城"},
            {"value":4885,"name":"红玫"},
            {"value":32294,"name":"好日子"},
            {"value":18574,"name":"阿里山"},
            {"value":38929,"name":"特美思"},
            {"value":969,"name":"玉溪"},
            {"value":37517,"name":"芙蓉王"},
        ]
    };
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: function (item) {
                return item.name + "：" + item.value.toFixed(2);
            }
        },
        series: [{
            type: 'wordCloud',
            sizeRange: [10, 30],
            rotationRange: [0, 0],
            rotationStep: 180,
            gridSize: 0,
            autoSize: { enable: true, minSize: 5 },
            shape: 'roundRect',
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 26,
                    color: '#333',
                    shadowColor: '#ccc',
                    fontSize: 20
                }
            },
            data: data.data.sort(function (a, b) {
                return b.value - a.value;
            })
        }]
    };
    chart.setOption(option);
});




window.onresize = function () {
    cSorNum.resize();
    lossGrowth.resize();
    expTime.resize();
    expLoc.resize();
    pInterval.resize();
    userGroup.resize();
    chart.resize();
};